<template>
  <div class="home">
    <div class="head">
      <div class="bet">
        <h3>宏烨经纪人</h3>
        <van-icon name="ellipsis" />
      </div>
      <div>
        <p class="imgs"><img src="../assets/logo.png" alt="" /></p>
        <span class="names">{{ state.datas.names }}</span>
      </div>
    </div>

    <div class="box">
      <p>
        <router-link to="/Newhome">
          <li style="color:cornflowerblue">188</li>
          <li>新房</li>
        </router-link>
      </p>

      <p>
        <router-link to="/Two">
          <li style="color:cornflowerblue">123</li>
          <li>二手房</li>
        </router-link>
      </p>

      <p>
        <router-link to="/Chuzu">
          <li style="color:cornflowerblue">188</li>
          <li>出租房</li>
        </router-link>
      </p>
    </div>

    <div class="foot">
      <p v-for="(item, index) in state.list" :key="index">
        <router-link :to="item.path">
          <li>
            <van-icon :name="item.icon" />
          </li>
          <li>{{ item.name }}</li>
        </router-link>
      </p>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive } from "vue";
import { useRoute } from "vue-router";
import route2 from "../router/route2";
import api from "../utility/request";
export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const route = useRoute();
    const state = reactive({
      list: route2,
      datas: route.query,
      newhomenum: "",
    });

    // api.get("/getnewhome").then((res) => {
    //   console.log(res.data.data);
    //   state.newhomenum = res.data.total[0].total;
    // });

    return {
      state,
    };
  },
});
</script>


<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
.head {
  width: 100%;
  height: 40%;
  background: cornflowerblue;
  display: flex;
  flex-direction: column;
  .bet {
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    color: #fff;
    h3{
      font-size: 18px;
    }
    i {
      font-size: 20px;
      color: #fff;
    }
  }
}

.box {
  width: 90%;
  height: 15%;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 999;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 20%);
  border-radius: 3%;
  text-align: center;
  p {
    margin-left: 2%;
    width: 30%;
    height: 50px;
    line-height: 50px;
    float: left;
    text-align: center;
    font-size: 15px;
    font-weight: bolder;
    a {
      text-decoration: none;
      color: #000;
    }
  }
}

.foot {
  margin-top: 20%;
  p {
    float: left;
    width: 33%;
    height: 10%;
    text-align: center;
    margin-top: 10%;
    a {
      text-decoration: none;
      color: #000;
    }
    i {
      font-size: 25px;
      padding: 10px 0;
    }
  }
}
.imgs {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -15%);
  img {
    width: 100%;
    height: 100%;
    // border-radius: 50%;
  }
}

.names {
  position: absolute;
  left: 50%;
  top: 29%;
  transform: translate(-50%, -29%);
  color: #fff;
}
//
</style>

